<template>
    <Collapse v-model:activeKey="collapseActiveKey" style="background: transparent" v-if="dataSource.length > 0">
        <template #expandIcon="{ isActive }">
            <CaretRightOutlined :rotate="isActive ? 90 : 0" style="color: #f5f5f5" />
        </template>
        <CollapsePanel :key="index + 1" :header="item.name ? item.name : `${item.type}名称`" v-for="(item, index) in dataSource">
            <template #extra>
                <DeleteOutlined text-red @click="handleDeleteConfig(index)" style="font-size: 20px;" />
            </template>
            <slot :dataFromChild="item"/>
        </CollapsePanel>
    </Collapse>
</template>

<script lang="ts" setup>
import {
    Collapse,
    CollapsePanel,
} from 'ant-design-vue'
import {
    CaretRightOutlined,
    DeleteOutlined
} from '@ant-design/icons-vue';

const dataSource = defineModel<Array>('dataSource', { required: true })

const collapseActiveKey = ref([]);


const handleDeleteConfig = (index: number) => {
    dataSource.value.splice(index, 1)
}

</script>

<style scoped></style>